﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>slot</title>
	<script type="text/javascript" src="bower_components/vue/dist/vue.js"></script>	
</head>
<body>
	<div id="box">
		<aaa>
			<ul slot="ul-slot">
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<ol slot="ol-slot">
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ol>
		</aaa>
		<hr />
		<aaa></aaa>
		<!-- 没数据是占位，特指时给slot一个name 给对应内容一个slot=“name值” -->
		<template id="aaa">
			<h2>22222</h2>
			<slot name="ol-slot">占个位置</slot>
			<p>pppppppppp</p>
			<slot name="ul-slot">占个位置</slot>
		</template>
	</div>
	
<script type="text/javascript">
	window.onload = function(){
		var vm=new Vue({
			el:"#box",
			components:{
				"aaa":{
					template:"#aaa"
				}
			}
		});
	}
</script>
</body>
</html>